<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2790765_duvrrfus5lc.css">
    <style>
        #box{
            width: 400px;
            height: 100px;
            background-color: #6ff;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <span>123123</span>
        <span>456456</span>
    </div>
</body>
<script>
    // 非表单元素的取值和赋值
    // innerHTML   获取和设置元素内的html结构(纯文本也会获取和设置文本)
    // innerText   获取和设置元素内的文本结构(如果设置 html结构会原样输出)


    var box = document.getElementById("box");

    box.onclick = function(){
        // innerHTML   获取和设置元素内的html结构
       /*  // 获取
        console.log(box.innerHTML);
        // 设置HTML结构
        // box.innerHTML = '<i class="iconfont icon-yanjing-zhengyan"></i>';
        box.innerHTML = 'asdasd'; */


        // innerText   获取和设置元素内的文本结构
        console.log(box.innerText);

        // box.innerText="zxczxczxc";
        box.innerText=`<i class="iconfont icon-yanjing-zhengyan"></i>`; // 原样输出

    }

</script>
</html>